Added cross-browser fullscreen behaviour#152
Open
MarielaTihova wants to merge 7 commits into
Open
Conversation
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Author
I have looked into this and it only happens when:
There might be workarounds but they would require too much of a faking of fullscreen behaviour and I think it's not worth the trade-off. |
DiLazarova
added
design: verified
✅ status: verified
Collaborator
|
@MarielaTihova please resolve conflicts |
…ples into mtihova/fix-147
Member
|
@ChronosSF Can this PR undergo a new review and be updated to the latest angular release. I notice |
There was a problem hiding this comment.
Pull request overview
This PR addresses cross-browser UI inconsistencies reported in #147 by improving fullscreen enter/exit detection (including Safari/WebKit events and F11 heuristics), adjusting fullscreen-related styling to avoid dark/black rendering, and updating Ignite UI-related dependencies across multiple example projects.
Changes:
- Added WebKit fullscreen event handling and centralized fullscreen detection/toggling logic in the home view.
- Updated home view styling for fullscreen and sub-header/tab areas to improve cross-browser rendering.
- Updated Ignite UI Angular / Charts / Core / WebComponents dependency versions (and corresponding lockfiles) across several projects.
Reviewed changes
Copilot reviewed 10 out of 20 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/views/home/home.component.ts | Adds cross-browser fullscreen event handling and updated fullscreen toggle logic. |
| src/app/views/home/home.component.scss | Adjusts colors/backgrounds for sub-header and fullscreen states. |
| projects/sales-grid/src/app/sales-grid/sales-grid.component.ts | Adds platform/browser detection for safer client-only UI behavior. |
| projects/sales-grid/src/app/sales-grid/sales-grid.component.html | Conditionally renders tooltip-related UI in the browser. |
| projects/hr-portal/package-lock.json | Lockfile metadata adjustment for hammerjs. |
| projects/fleet-management-grid/package-lock.json | Bumps Ignite UI packages in lockfile. |
| projects/erp-hgrid/package-lock.json | Bumps Ignite UI packages in lockfile. |
| projects/charts/step-chart/package.json | Bumps Ignite UI and webcomponents dependency ranges. |
| projects/charts/step-chart/package-lock.json | Updates resolved Ignite UI/webcomponents versions and peer metadata. |
| projects/charts/polar-chart/package.json | Bumps Ignite UI and webcomponents dependency ranges. |
| projects/charts/polar-chart/package-lock.json | Updates resolved Ignite UI/webcomponents versions and peer metadata. |
| projects/charts/pie-chart/package.json | Bumps Ignite UI and webcomponents dependency ranges. |
| projects/charts/pie-chart/package-lock.json | Updates resolved Ignite UI/webcomponents versions and peer metadata. |
| projects/charts/line-chart/package.json | Bumps Ignite UI and webcomponents dependency ranges. |
| projects/charts/line-chart/package-lock.json | Updates resolved Ignite UI/webcomponents versions and peer metadata. |
| projects/charts/column-chart/package.json | Bumps Ignite UI and webcomponents dependency ranges. |
| projects/charts/column-chart/package-lock.json | Updates resolved Ignite UI/webcomponents versions and peer metadata. |
| projects/charts/bar-chart/package.json | Bumps Ignite UI and webcomponents dependency ranges. |
| projects/charts/bar-chart/package-lock.json | Updates resolved Ignite UI/webcomponents versions and peer metadata. |
| package-lock.json | Updates root resolved Ignite UI packages. |
Files not reviewed (9)
- projects/charts/bar-chart/package-lock.json: Generated file
- projects/charts/column-chart/package-lock.json: Generated file
- projects/charts/line-chart/package-lock.json: Generated file
- projects/charts/pie-chart/package-lock.json: Generated file
- projects/charts/polar-chart/package-lock.json: Generated file
- projects/charts/step-chart/package-lock.json: Generated file
- projects/erp-hgrid/package-lock.json: Generated file
- projects/fleet-management-grid/package-lock.json: Generated file
- projects/hr-portal/package-lock.json: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
70
to
75
| ngOnDestroy(): void { | ||
| if (!isPlatformBrowser(this.platformId)) return; | ||
|
|
||
| document.removeEventListener('fullscreenchange', this.onFullscreenChange); | ||
| document.addEventListener('webkitfullscreenchange', this.onFullscreenChange); // Safari / Mac | ||
| window.removeEventListener('resize', this.onResize); |
Comment on lines
211
to
+226
| public async onToggleFullscreen(): Promise<void> { | ||
| if (!isPlatformBrowser(this.platformId)) return; | ||
|
|
||
| const el = this.fullscreenElement?.nativeElement; | ||
| if (!el) return; | ||
|
|
||
| if (!document.fullscreenElement && el?.requestFullscreen) { | ||
| await el.requestFullscreen(); | ||
| this.isFullscreen = true; | ||
| } else if (document.exitFullscreen) { | ||
| await document.exitFullscreen(); | ||
| this.isFullscreen = false; | ||
| try { | ||
| if (!this.isFullscreen) { | ||
| await this.requestFullscreen(el); | ||
| } else { | ||
| await this.exitFullscreen(); | ||
| } | ||
|
|
||
| this.isFullscreen = this.isElementFullscreen(); | ||
| this.cdr.detectChanges(); | ||
| } catch (err) { |
Comment on lines
+227
to
+228
| background: white; | ||
| color: var(--ig-gray-900, black); |
Comment on lines
235
to
+236
| background: white; | ||
| color: var(--ig-gray-900, black); |
Comment on lines
+5
to
+7
| <button *ngIf="isBrowser && configTooltipRef" igxButton="contained" style="margin-right: 10px;" | ||
| [igxToggleAction]="viewDropdown" [igxDropDownItemNavigation]="viewDropdown" | ||
| [igxTooltipTarget]="configTooltipRef"> |
| <div #configTooltipRef="tooltip" igxTooltip> | ||
| Change pivot configuration. | ||
| </div> | ||
| <div *ngIf="isBrowser && configTooltipRef" #configTooltipRef="tooltip" igxTooltip> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Resolves #147